import React, { useEffect, useState } from "react";
import {
  useLocation,
  useSearchParams,
  useNavigate,
  useParams,
} from "react-router-dom";
import {
  NavBar,
  Collapse,
  Tag,
  Button,
  Popup,
  Steps,
  Input,
} from "antd-mobile";
import styles from "./detail.module.css";
import { AntOutline } from "antd-mobile-icons";
import axios from "axios";
const { Step } = Steps;
function Index() {
  const navigate = useNavigate();
  const { id } = useParams();

  const [itemData, setItemData] = useState({});
  const [visible1, setVisible1] = useState(false);
  const [value, setValue] = useState("");
  const [messList, setMessList] = useState([]);
  const getDeatilData = async () => {
    const res = await axios.get("/api/trip/train/detail", { params: { id } });
    const { code, data } = res.data;
    if (code === 200) {
      setItemData(data);
    }
  };

  useEffect(() => {
    getDeatilData();
  }, []);


  if (!itemData.id) {
    return <div>加载中...</div>;
  }

  const sitList = ["商务座", "一等座", "二等座"];
  const sitPrices = [
    itemData.tick.vip,
    itemData.tick.firstTick,
    itemData.tick.secondTick,
  ];

  const handelToOrder = () => {
    navigate("/order", {
      state: itemData,
    });
  };

  const handelSubmit = () => {
    if (value === "") return;
    setMessList([...messList, value]);
    setValue("");
  };

  return (
    <div>
      <div>
        <div className={styles.list}>
          <div className={styles.listItem}>
            <div className={styles.itemCon}>
              <span>{itemData.start}</span>
              <span>{itemData.end}</span>
              <span>{itemData.startTime}</span>
              <span>¥{itemData.tick.secondTick}</span>
            </div>
            <p onClick={() => setVisible1(true)}>列车时刻表</p>
          </div>
        </div>
      </div>
      <div>
        <Collapse
          accordion
          arrowIcon={() => (
            <Tag color="warning" onClick={() => handelToOrder()}>
              订
            </Tag>
          )}
        >
          {sitList.map((item, index) => (
            <Collapse.Panel
              key={index}
              title={`${item} ${sitPrices[index]}`}
            ></Collapse.Panel>
          ))}
        </Collapse>
      </div>
      <div>
        <Input
          placeholder="请输入内容"
          value={value}
          onChange={(val) => {
            setValue(val);
          }}
        />
      </div>
      <Button block color="success" size="large" onClick={() => handelSubmit()}>
        提交
      </Button>
      <div>
        {messList.map((item, index) => (
          <p key={index}>{item}</p>
        ))}
      </div>

      <Popup
        visible={visible1}
        onMaskClick={() => {
          setVisible1(false);
        }}
        onClose={() => {
          setVisible1(false);
        }}
      >
        <Steps direction="vertical">
          <Step
            title="北京"
            status="finish"
            description="完成时间：2020-12-01 12:30"
          />
          <Step
            title="定州"
            status="finish"
            description="完成时间：2020-12-01 12:30"
          />
          
          <Step
            title="保定"
            status="finish"
            description="完成时间：2020-12-01 12:30"
          />
          <Step
            title="石家庄"
            status="finish"
            description="完成时间：2020-12-01 12:30"
          />
        </Steps>
      </Popup>
    </div>
  );
}

export default Index;
